<template>
  <div class="excel-container">
    <div>
        <el-button type="primary" size="mini" @click="exportToExcel">下载Excel</el-button>
    </div>
    <div ref="excelView" v-html="htmlData"></div>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';
import ExcelView from '@/components/excelView/ExcelView.vue';
export default {
    components: {
        ExcelView
    },
    data(){
        return {
            htmlData: '',
        }
    },
    mounted(){
        this.ReadHtml();
    },
    methods: {
        ReadHtml() {
            let file = "/data/Excel.html";
            fetch(file)
                .then(response => response.text())  // 将响应内容作为文本返回
                .then(data => {
                    console.log(data); // 打印文件内容
                    this.htmlData = data;
                })
                .catch(error => {
                    console.error('Error reading the file:', error);
                });
        },
        exportToExcel() {
            const table = this.$refs.excelView;
            const wb = XLSX.utils.table_to_book(table); // 将表格转换为工作簿
            
            XLSX.writeFile(wb, 'export.xlsx'); // 导出为Excel文件
        }
    }
}
</script>

<style lang="scss" scoped>
.excel-container{

}
</style>